<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>最小化更新</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn">click</button>
  <script src="./mysndom.js"></script>
  <script>
    const { h, patch } = window.snabApi
    
    const container = document.getElementById('container')
    const btn = document.getElementById('btn')
    const node0 = h('div', {}, [
      h('p', { key: 'A' }, 'A'),
      h('p', { key: 'B' }, 'B'),
      h('p', { key: 'C' }, 'C')
    ])
    const node1 = h('div', {}, [
      h('p', { key: 'Q' }, 'Q'),
      h('p', { key: 'A' }, 'A'),
      h('p', { key: 'B' }, 'B'),
      h('p', { key: 'T' }, 'T'),
      h('p', { key: 'C' }, 'C')
    ])

    patch(container, node0);
    btn.addEventListener('click', ()=>{ patch(node0, node1) })
  </script>
</body>
</html>